<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/header.css" />
    <link rel="stylesheet" type="text/css" href="fonts/tab_icon/iconfont.css">
</head>
<body>
	<header class="mui-bar mui-bar-nav title">
	    <h1 id="title" class="mui-title title-color"><b>嗨聊</b></h1>
	</header>
	
	<nav class="mui-bar mui-bar-tab">
	    <a id="defaultTab" class="mui-tab-item mui-active" tabIndex="0" href="page/chat/feixin_chatlist.html">
	        <span class="mui-icon iconfont icon-liaotian"></span>
	        <span class="mui-tab-label">嗨聊</span>
	    </a>
	    <a class="mui-tab-item" tabIndex="1" href="page/contact/feixin_contact.html">
	        <span class="mui-icon iconfont icon-tongxunlu"></span>
	        <span class="mui-tab-label">通讯录</span>
	    </a>
	    <a class="mui-tab-item" tabIndex="2" href="page/discover/feixin_discover.html">
	        <span class="mui-icon iconfont icon-faxian"></span>
	        <span class="mui-tab-label">发现</span>
	    </a>
	    <a class="mui-tab-item" tabIndex="3" href="page/me/feixin_me.html">
	        <span class="mui-icon iconfont icon-wode"></span>
	        <span class="mui-tab-label">我的</span>
	    </a>
	</nav>
	
	<script type="text/javascript" src="js/mui.min.js" ></script>
	<script type="text/javascript">
		
		mui.init();
		
		var subpages = [
			{
				pageId: 'feixin_chatlist.html',
				pageUrl: 'page/chat/feixin_chatlist.html'
			},
			{
				pageId: 'feixin_contact.html',
				pageUrl: 'page/contact/feixin_contact.html'
			},
			{
				pageId: 'feixin_discover.html',
				pageUrl: 'page/discover/feixin_discover.html'
			},
			{
				pageId: 'feixin_me.html',
				pageUrl: 'page/me/feixin_me.html'
			}
		];
		
		var feixinStyle = {
			top: '44px',
			bottom: '50px'
		};

		var aniShow = {};
		
		//创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			
			//首页禁用返回
			var clickNum = 0;
			mui.back = function(event){
			   clickNum++;
			   if(clickNum > 1){
			       plus.runtime.quit();
			   }else{
			       mui.toast("再按一次退出应用");
			   }
			   return false;
			}

			plus.navigator.setStatusBarStyle("light");
      		plus.navigator.setStatusBarBackground("#4eabe8");
			
			//获取当前的webview对象
			var arr = document.getElementsByClassName("mui-tab-item")
			
			var pageArr = []; 
			var slef = plus.webview.currentWebview(); 
			for(var i=0; i<arr.length; i++){ 
				// 有几个选项卡，需要创建几个子页面
		        var page = plus.webview.create(subpages[i].pageUrl, subpages[i].pageId, feixinStyle);
		        pageArr.push(page); 
		        !function(i){
		            arr[i].addEventListener("tap",function(){ // 让当前页面(i)显示，不是当前页面隐藏
		                for(var j=0; j<pageArr.length; j++){ 
		                	if(j!=i) 
		                		pageArr[j].hide(); 
		                	else 
		                		pageArr[j].show();
		                } 
		                /* 
		                 * 让新创建的webview，追加合并到当前的窗口上。合并成一个窗口。
		                 * 目的：将父子窗口合并成一个页面，实现同开同关的效果。 避免点击返回安监室，子页面先关闭，而父页面的头部和尾部没有关闭的BUG。 
		                 */ 
		                 slef.append(pageArr[i]);
		            }) 
		        }(i);
		    } // 默认触发第0个选项卡的tap事件。
		    mui.trigger(arr[0],"tap");
			
			//当前激活选项
			var activeTab = subpages[0].pageUrl;
			var title = document.getElementById("title");
			//选项卡点击事件
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');
				if (targetTab == activeTab) {
					return;
				}
				//更换标题
				title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
				//显示目标选项卡
				//若为iOS平台或非首次显示，则直接显示
				if(mui.os.ios||aniShow[targetTab]){
					plus.webview.show(targetTab);
				}else{
					//否则，使用fade-in动画，且保存变量
					var temp = {};
					temp[targetTab] = "true";
					mui.extend(aniShow,temp);
					plus.webview.show(targetTab,"fade-in",300);
				}
				//隐藏当前;
				plus.webview.hide(activeTab);
				//更改当前活跃的选项卡
				activeTab = targetTab;
			});
			 //自定义事件，模拟点击“首页选项卡”
			document.addEventListener('gohome', function() {
				var defaultTab = document.getElementById("defaultTab");
				//模拟首页点击
				mui.trigger(defaultTab, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if (defaultTab !== current) {
					current.classList.remove('mui-active');
					defaultTab.classList.add('mui-active');
				}
			});
			
			setTimeout(initData(), 5000);
		});
			
		function initData() {
			console.log("进来了");
			var dd = plus.webview.currentWebview();
			console.log("当前：" + JSON.stringify(dd));
			var feixin_chatlist = plus.webview.getWebviewById('feixin_chatlist.html');
			console.log(JSON.stringify(feixin_chatlist));
			mui.fire(feixin_chatlist, "refreshPage");
			var feixin_me = plus.webview.getWebviewById('feixin_me.html');	
			mui.fire(feixin_me, "refreshPage");
		}
	</script>
</body>
</html> 